/* eslint-disable react/jsx-no-useless-fragment */
//@ts-nocheck
import React, { useEffect, useMemo, useRef, useState } from 'react'
import { Tooltip } from 'antd'
import './index.less'

const LegendItem = ({ len, color, isGray, text, index, onClick }) => {
  return (
    <div className="legend-item">
      <span
        className="block"
        style={{
          backgroundColor: isGray ? '#ccc' : color,
          borderRadius: index + 1 === len ? '0px' : '50%'
        }}
        onClick={() => onClick(color)}
      />
      <span className="text">{text}</span>
    </div>
  )
}

const TooltipTitle = ({ color, legendText, pointText }) => {
  return (
    <div className="tooltip-title">
      <span className="block" style={{ backgroundColor: `${color}` }} />
      <div>
        <div className="text top">{legendText}</div>
        <div className="text">{pointText}</div>
      </div>
    </div>
  )
}

const ScatterHorizontalBarChart = ({
  max,
  legend,
  data,
  scaleNum = 10,
  pillarHeight = 16,
  axisDistance = 104,
  backgroundColor = 'f9f9fa',
  leftNameDistance = 9
}) => {
  const [listData, setListData] = useState([])
  const [scaleArray, setScaleArray] = useState([])
  const [legendList, setLegendList] = useState([])
  const pointRef = useRef(null)

  useEffect(() => {
    setLegendList(
      legend?.map((i) => {
        return {
          ...i,
          isGray: false
        }
      })
    )
  }, [legend])

  useEffect(() => {
    if (scaleNum <= 0) {
      return
    }
    let maxValue = max
    let fValue = maxValue % (5 * scaleNum)
    if (fValue !== 0) {
      maxValue = maxValue + (5 * scaleNum - fValue)
    }
    if (maxValue < 5 * scaleNum) maxValue = 5 * scaleNum

    const _list = data?.map((dataItem) => {
      return {
        ...dataItem,
        title: dataItem?.title,
        percent: (dataItem?.value / maxValue) * 100,
        value: dataItem?.value
      }
    })
    const __list = _list?.map((dataItem) => {
      return {
        ...dataItem,
        points: dataItem?.points?.map((item) => {
          return {
            ...item,
            precent: (item.value / maxValue) * 100,
            showPoint: true,
            isHover: false
          }
        })
      }
    })

    const disposeLegendTextFunc = (color) => {
      return legend?.find((item) => item.color === color).text
    }

    const ___list = __list?.map((dataItem) => {
      return {
        ...dataItem,
        points: dataItem?.points?.map((item) => {
          return {
            ...item,
            legendText: disposeLegendTextFunc(item.color)
          }
        })
      }
    })

    setListData(___list)

    const newArray = new Array()
    const maxScaleNum = maxValue / scaleNum
    for (let i = 0; i <= scaleNum; i += 1) {
      newArray.push(i * maxScaleNum)
    }
    setScaleArray(newArray)
  }, [data, scaleNum])

  const onClick = (color) => {
    const list = [].concat(listData)
    const _legendList = [].concat(legend)
    list.forEach((dataItem) => {
      dataItem.points.forEach((item) => {
        if (item.color === color) {
          item.showPoint = !item.showPoint
        }
      })
    })

    _legendList.forEach((item) => {
      if (item.color === color) {
        item.isGray = !item.isGray
      }
    })

    setListData(list)
    setLegendList(_legendList)
  }

  const changePointSize = (point) => {
    const list = [].concat(listData)
    list.forEach((dataItem) => {
      dataItem.points.forEach((item) => {
        if (item.color === point.color) {
          item.isHover = !item.isHover
        }
      })
    })
    setListData(list)
  }

  const renderNumber = (scaleNum, itemIndex) => {
    const num = (10 / scaleNum) * itemIndex
    return num > 0 && num < 9 ? `${num}.0` : num
  }

  return (
    <div className="scatter-horizontal-bar-chart">
      <section className="scatter-horizontal-chart">
        <div className="chart-bar-y-axis">
          {listData?.map((item, index) => {
            return (
              <div className="chart-bar-y-axis-item" key={index} ref={pointRef}>
                <div
                  className="chart-bar-y-axis-item-name"
                  style={{ paddingRight: leftNameDistance }}
                >
                  {item.title}
                </div>
                <div
                  className="chart-bar-y-axis-item-percent"
                  style={{
                    width: `${scaleNum * axisDistance}px`,
                    backgroundColor: `#${backgroundColor}`
                  }}
                >
                  <div style={{ width: `${item.percent}%`, height: pillarHeight }} />
                  <div className="points">
                    {item?.points?.map((point, index) => {
                      return (
                        <span
                          key={index}
                          className="block"
                          style={{
                            left: `${point.precent}%`
                          }}
                        >
                          {point.showPoint && (
                            <Tooltip
                              title={
                                <TooltipTitle
                                  color={point.color}
                                  legendText={point.legendText}
                                  pointText={`${item.title}：${item.value}`}
                                />
                              }
                              placement="right"
                              arrowPointAtCenter
                              color="#ffffff"
                              overlayClassName="scatter-horizontal-bar-chart-tooltip"
                            >
                              <span
                                className="point"
                                style={{
                                  backgroundColor: `${point.color}`
                                }}
                                onMouseEnter={() => changePointSize(point)}
                                onMouseLeave={() => changePointSize(point)}
                              />
                            </Tooltip>
                          )}
                        </span>
                      )
                    })}
                  </div>
                </div>
              </div>
            )
          })}
        </div>
        <div className="bar-x-axis" style={{ width: `${scaleNum * axisDistance}px` }}>
          <ul className="chart-bar-x-axis">
            {scaleArray.map((item, itemIndex) => {
              return (
                <li
                  className="chart-bar-x-axis-li"
                  style={{ left: `${(100 / scaleNum) * itemIndex}%` }}
                  key={itemIndex}
                >
                  <span>{renderNumber(scaleNum, itemIndex)}</span>
                </li>
              )
            })}
          </ul>
        </div>
      </section>
      <div className="legend">
        {legendList?.map((item, index) => {
          return (
            <LegendItem
              len={legend.length}
              key={index}
              index={index}
              color={item.color}
              isGray={item.isGray}
              text={item.text}
              onClick={onClick}
            />
          )
        })}
      </div>
    </div>
  )
}

export default ScatterHorizontalBarChart
